<template>
    <div class="head" v-if="userInfo">
        <el-row class="headerRow">
            <el-col  :span="6" class="headerflex">
                <el-icon :size="20" class="cursor icon" @click="collapseMenu(!flag)">
                    <Operation></Operation>
                </el-icon>
                <h2 class="title">商城在线管理系统</h2>
            </el-col>
            <el-col :span="12" class="headerflex">
                <marquee behavior = "" direction="" class="martext">
                        学海无涯苦作舟,书山有路勤为径!
                </marquee> 
            </el-col>  

           <el-col :span="6" class="headitem">
                <div class="headinfo">   
                    <el-icon class="el-icon--right" size="20">
                                    <Sunset/>
                    </el-icon>
                    <el-dropdown>
                        <p class="name" v-if="userInfo">
                            <span>{{userInfo.username}}</span>
                        </p>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item>首页</el-dropdown-item>
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-dropdown-item>公告</el-dropdown-item>
                                <el-dropdown-item @click="loginOut">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                    <div v-if="roleList.length>0">
                        <el-tag class="ml10" 
                            effect="dark" 
                            v-for="(val,key) in roleList.filter(item=>item.level==userInfo.role)" :key="key"
                            :color="val.color"
                            >
                            <span>{{val.namestar}}</span>
                        </el-tag>
                    </div>
                </div>
            </el-col>
        </el-row> 
    </div>
</template>
<script>
import {computed, reactive,toRefs} from 'vue';
import {ArrowLeftBold,Sunset,ArrowRightBold,AddLocation,ArrowDown,Operation} from "@element-plus/icons-vue";
import { useStore } from 'vuex';
// import Avatar from "./Avatar.vue";
import {ElMessage,ElMessageBox} from "element-plus";
import { useRoute, useRouter } from 'vue-router';
export default {
    components:{
        ArrowLeftBold,
        Operation,
        Sunset
    },
    setup(props){
        const store = useStore();
        const router = useRouter()
        const collapseMenu = (val)=>{
            store.commit('updFlag',val);
        }
        const loginOut = ()=>{
            ElMessageBox.confirm(
                '你真的要退出登录吗?',
                '警告!',
                {
                    confirmButtonText:'确定',
                    cancelButtonText:'取消',
                    type:'warning'
                }
            ).then(()=>{
                router.replace({name:'login'});
                sessionStorage.removeItem('token');
                store.commit('updUserInfo',null);
            });
        }

        return{
            collapseMenu,
            loginOut,
        }
    }
}
</script>

<style lang="scss" scoped>
.cursor{
    cursor: pointer;
}
.el-icon--right{
    margin-right: 30px ;
}
.head{
    height: 100%;
    .headerRow{
        height: 100%;
    }
    .icon{
        width: 20px;
        height: 20px;
        color: #000;
        cursor: pointer;
    }
    .headerflex{
        display: flex;
        align-items: center;
        height: 100%;
    }
    .martext{
        color:#123456;
        padding:0 10px;
    }
    .headeritem{
        display: flex;
        align-items: center;
        height: 100%;
        .icon{
        width: 20px;
        height: 20px;
        color: #000;
        cursor: pointer;
        margin-left: 30px;
        margin-right: 30px;
        }
    }
     .headinfo{
        height: 100%;
        display: flex;
        align-items: center;
        padding-left:20px;
        position: relative;
        justify-content: center;
        .name{
            font-size: 20px;
            color:#999;
            display: flex;
            align-items: center;
            line-height: 1;
            cursor: pointer;
        }
    }   
}
</style>